<template>
	<view>
		<!-- 顶部搜索 -->
		<view class="top-tabber-search">
			<view :style="{height:statuHeight+'px'}"></view>
			<view class="tba-search-box">
				<view class="iconfont" @click="backClick">&#xe614;</view>
				<view class="search-input">
					<view class="iconfont search-icon">&#xe6aa;</view>
					<input class="uni-input" :placeholder="i18n.inputPlace" v-model="fromData.keyword" 
					placeholder-style="font-size: 12px;font-family:PingFang SC;font-weight: 500;color: #E0E0E0;"/>
				</view>
				<view class="search-name" click="queryVideo">{{ i18n.search }}</view>
			</view>
		</view>
		<!-- 主体内容 -->
		<view class="main" v-if="!searchList.length">
			<!-- 历史记录 -->
			<view class="history-box">
				<view class="history-delter">
					<view class="history">{{ i18n.HistoricalRecords }}</view>
					<view class="delter-icon">
						<view class="iconfont" @click="backClick">&#xe619;</view>
						<view @click="clearAway">{{ i18n.eliminate }}</view>
					</view>
				</view>
				<view>
					<view class="record-name" v-for="(item,index) in historyList" :key="index">{{item}}</view>
				</view>
			</view>
			<!-- 推荐影片 -->
			<view class="recmd-video-box">
				<view class="recmd-video">{{ i18n.RecommendedFilm }}</view>
				<view class="recom-list">
					<view class="recmd-text-img" v-for="(item,index) in recmdList" :key="item.id" @click="videoDetail(item.furl,item.vid)">
						<view class="img-box">
							<image class="img" :src="item.fcoverUrl"></image>
						</view>
						<view class="text-name">{{item.vcoverTitle}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 搜索的内容 -->
		<view class="search-conton-main">
			<view class="item-list" v-for="(item,index) in searchList" :key="item.vid"  @click="videoDetail(item.furl,item.vid)">
				<image class="img" mode="aspectFill" :src="item.fcoverUrl"></image>
				<view class="text-play">
					<rich-text class="name" :nodes="brightenKeyword(item.vtitle,fromData.keyword)"></rich-text>
					<view class="play-vplayCount">
						<view class="iconfont">&#xe627;</view>
						<view class="play">{{item.vplayCount}}{{ i18n.PlaybackVolume }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { $POST, $GET } from '@/network/api.js'
	export default {
		computed: {
			i18n () {  
				return this.$t('home')  
			}  
		 },
		data() {
			return {
				timeout: 0,
				fromData: {
					keyword: "",
					pageNum: 1,
					pageSize: 10
				},
				videoFormL: { // 视频列表参数
					channelId: 1,
					isVip: 0,
					pageNum: 1,
					pageSize: 10
				},
				searchList: [], // 搜索数据
				recmdList: [], // 相关推荐数据
				historyList: [], // 历史记录
				statuHeight: uni.getSystemInfoSync().statusBarHeight,
			}
		},
		onLoad() {
			const hisArr = uni.getStorageSync('HistoryList')
			if(hisArr.length) {
				this.historyList = hisArr
			}
			this.getVideo() // 获取视频列表
		},
		 watch: {
		    "fromData.keyword"(newName, oldName) {
					clearTimeout(this.timeout)
					if(newName) {
						this.timeout = setTimeout(() => {
							this.queryVideo()
						}, 1000)
					}
					else{
						this.searchList = []
					}
		    }
		  },
		methods:{
			// 跳视频详情
			 videoDetail(url,id) {
				uni.navigateTo({
					url: '/pages/home/video_details?videoUrl='+url+'&vid='+id
				})
			 },
			// 获取视频列表
			async getVideo() {
				const res = await $POST('/boke-item/file/getVideoFile',this.videoFormL)
				this.recmdList = JSON.parse(JSON.stringify(res.data.slice(0,2))) 
			},
			// 清除历史
			clearAway() {
				uni.removeStorage({ key: 'HistoryList'})
				this.historyList = []
			},
				//搜索高亮
			brightenKeyword(val, keyword) {
				if (keyword.length > 0) {
					let keywordArr = keyword.split("");
					val = val + "";
					keywordArr.forEach(item => {
						if (val.indexOf(item) !== -1 && item !== "") {
						val = val.replace(
							new RegExp(item,'g'),
							'<span style="color:red;font-size: 15px;">' + item + '</span>'
						);
						}
					});
					return val;
				} else {
					return val;
				}
			},
			// 查询
			async queryVideo() {
				if(this.fromData.keyword) {
					const res = await $POST('/boke-item/search/getVideo',this.fromData)
					if(res.code === "0000000") {
						this.searchList = res.data
						this.historyList.unshift(this.fromData.keyword)
						let historyData = Array.from(new Set(this.historyList))
						this.historyList.splice(20,this.historyList.length-20)
						const HistoryList = historyData.slice(0,20)
						uni.setStorageSync('HistoryList', HistoryList)
					}
				}else{
					this.searchList = []
				}
			},
			// 返回上一页
			backClick() {
				uni.switchTab({
				  url: '/pages/home/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-tabber-search{
		background: #5B2177;
		.tba-search-box{
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 60rpx 0 41rpx;
			.iconfont{
				color: #FFFFFF;
			}
			.search-input{
				width: 480rpx;
				height: 58rpx;
				background: rgba(173, 144, 187,0.5);
				border-radius: 29rpx;
				display: flex;
				align-items: center;
				.search-icon{
					margin: 0 11rpx 0 24rpx;
					color: #E0E0E0;
				}
				.uni-input{
					width: 419rpx;
					height: 58rpx;
					line-height: 58rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					color: #FFFFFF;
				}
			}
			.search-name{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
	
	.main{
		padding: 0rpx 24rpx;
		// 历史记录
		.history-box{
			margin-bottom: 48rpx;
			.history-delter{
				padding: 20rpx 16rpx 20rpx 7rpx;
				border-bottom: 1px solid #EEEEEE;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.history{
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
				.delter-icon{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
					.iconfont{
						margin-right: 8rpx;
					}
				}
			}
			.record-name{
				display: inline-block;
				padding: 8rpx 25rpx;
				border: 1rpx solid #999999;
				border-radius: 25rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				margin: 23rpx 20rpx 0 0;
			}
		}
		// 推荐影片
		.recmd-video-box{
			// padding: 0rpx 16rpx 0rpx 7rpx;
			.recmd-video {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				margin-bottom: 15px;
			}
			.recom-list{
				width: 100%;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.recmd-text-img:nth-child(2n) {
					margin-right:0 !important;
				}
				.recmd-text-img{
					// display: flex;
					// align-items: center;
					// margin-bottom: 23rpx;
					margin:0 20rpx 20rpx 0;
					.img-box{
						width: 340rpx;
						height: 192rpx;
						border-radius: 10rpx;
						.img{
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}
					.text-name{
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						margin-bottom: 22rpx;
					}
					 .text-name:nth-of-type(1){
						 color: #FF1854 !important;
					 }
					.text-name:last-child{
						margin-bottom: 0 !important;
					}
				}
			}
		}
	}

	// 搜索内容
	.search-conton-main{
		padding: 30rpx 24rpx;
		.item-list{
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1px solid #EEEEEE;
			.img{
				width: 240rpx;
				height: 134rpx;
				border-radius: 10rpx;
			}
			.text-play{
				// width: 50%;
				height: 134rpx;
				margin-left: 40rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				.name{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
				.play-vplayCount{
					margin-top:16rpx;
					display: flex;
					align-items: center;
					.iconfont{
						color: #999999;
						margin-right: 10rpx;
					}
					.play{
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
		}
	}
</style>
